import React, {useEffect, useState} from "react";

import {getCategoryList, getRecommendData, updateFlag} from "../../api/pro";
import {Space, Table, Button, Image, Switch} from "antd";

const Com = () => {
  // 列表数据
  const [proList, setProList] = useState( [] )
  // 固定头和列
  const [height, setHeight] = useState( 500 )
  // 分页器
  const [current, setCurrent] = useState( 1 )
  const [pageSize, setPageSize] = useState( 10 )
  // 分类数据
  const [cateList ,setCateList] = useState([])

  const columns = [
    {
      title: '序号',
      width: 55,
      fixed: 'left',
      align: 'center',
      render: (text, record, index) => (<span>{(current -1) * pageSize + index + 1}</span>)
    },
    {
      title: '图片',
      width: 80,
      fixed: 'left',
      dataIndex: 'img1',
      align: 'center',
      render: (text, record, index) => (<Image src={text} style={{width: 80, height: 80}}/>)
    },
    {
      title: '名称',
      width: 150,
      fixed: 'left',
      align: 'center',
      dataIndex: 'proname',
    },
    {
      title: '品牌',
      width: 110,
      dataIndex: 'brand',
      align: 'center',
    },
    {
      title: '分类',
      width: 110,
      dataIndex: 'category',
      align: 'center',
      filters: cateList,
      onFilter: (value, record) => record.category.indexOf(value) === 0
    },
    {
      title: '原价',
      width: 110,
      dataIndex: 'originprice',
      align: 'center',
      sorter: (a, b) => a.originprice - b.originprice
    },
    {
      title: '折扣',
      width: 110,
      dataIndex: 'discount',
      align: 'center',
      sorter: (a, b) => a.discount - b.discount
    },
    {
      title: '销量',
      width: 110,
      dataIndex: 'sales',
      align: 'center',
      sorter: (a, b) => a.sales - b.sales
    },
    {
      title: '是否推荐',
      width: 55,
      fixed: 'right',
      dataIndex: 'isrecommend',
      align: 'center',
      render: (text, record, index) => {
        return (
            <Switch checked={text === 1} onChange={checked => {
              updateFlag({
                proid: record.proid,
                type: 'isrecommend',
                flag: checked
              }).then(() => {
                getData()
              })
            }}>

            </Switch>
        )
      }
    },
    {
      title: '操作',
      width: 200,
      fixed: 'right',
      align: 'center',
      render: (text, record, index) => (
          <Space>
            <Button>编辑</Button>
            ｜
            <Button>删除</Button>
          </Space>
      )
    },
  ]
  useEffect(() => {
    getCategoryList().then(res => {
      const arr = []
      res.data.forEach(item =>{
        arr.push({text: item, value: item})
      })
      setCateList(arr)
    })
  },[cateList])

  const getData = () => {
    getRecommendData().then( res => {
      console.log( res.data )
      setProList( res.data )
    })
  }
  /**
   * @param {((prevState: number) => number)|number} page
   * @param {((prevState: number) => number)|number} pageSize
   */
  const changePage = (page, pageSize) => {
    setCurrent(page)
    setPageSize(pageSize)
  }

  useState(()=> {
    setHeight(window.innerHeight - 110 - 175)
  })

  useEffect( () => {
    getData()
  }, [] )

  return (
      <Space direction="vertical" style={{width: '100%'}}>
        <Table
            dataSource={proList}
            columns={columns}
            rowKey="proid"
            pagination={{
              position: ['bottomRight'],
              current,
              pageSize,
              onChange: changePage,
              pageSizeOptions: ['5','10','15','20'],
              showQuickJumper: true,
              showTotal: (total) => <span style={{marginRight: '250px'}}>共有 {total} 条数据</span>
            }}
            scroll={{x: 1500, y: height}}
        />
      </Space>
  )
}

export default Com
